<%@ taglib uri="/tld/extremecomponents" prefix="ec" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.ArrayList;" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="../js/echarts.min.js"></script>
	
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css"/><!--栅格布局-->
	<link rel="stylesheet" href="<%=request.getContextPath() %>/css/templatemo-style.css"/>
<title>详情</title>
	<style type="text/css">
		 body{
			 overflow: hidden;
			 background-color :#fff;
			 background-image:url('../images/right_bg.jpg');
			 background-size: cover;
		}
		#container1{
			margin-top:20px;
			height:480px;
			background-color:none;
		    background-color:rgba(0,0,0,0.1); 
			color:red;
			border:3px solid #ccc; 
			margin:22px;	
		}
		#container1:hover{
			transform:translateY(-6px);
			box-shadow:0 0 15px rgba(0,0,0,.8);
			border:3px solid rgb(148, 147, 147);
		}
	</style>
</head>
<body>
<!--从后台取出数据-->
	<%
		ArrayList<String> studentNamelist = (ArrayList<String>)request.getSession().getAttribute("studentNamelist");
		ArrayList<String> similarScorelist = (ArrayList<String>)request.getSession().getAttribute("similarScorelist");
		%>
		
            	
                <div id="container1" >
    			<script type="text/javascript">
        			// 基于准备好的dom，初始化echarts实例
        			var myChart = echarts.init(document.getElementById('container1'));
        
    				var list=new Array();
    				var title=new Array();
					<%for(int i=0;i<similarScorelist.size();i++){%>  
						list[<%=i%>]=<%=similarScorelist.get(i)%>;
						
	 				<%}%>
	 				<%for(int i=0;i<studentNamelist.size();i++){%>  
					title[<%=i%>]="<%=studentNamelist.get(i)%>";
					
 				<%}%>
	 				
        			// 指定图表的配置项和数据
        			var option = {
            			title: {
                			text: '作业相似度',
                			textStyle: {
	                            fontWeight: 'normal',             
	                            color: '#2A5D75'  //标题颜色A3FFFC
                     },
            			},
            			tooltip: {},
            			legend: {
            				orient: 'vertical',
            				left: 'right',
                			data:['相似度'],
              			  	textStyle: {
                                fontWeight: 'normal',              
                                color: 'black'   //legend颜色
                        },
            			},
            			xAxis: {
                			data: title,
                			//  改变x轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			yAxis: {
            			//  改变y轴颜色
                            axisLine:{
                                lineStyle:{
                                    color:'#2A5D75',
                                }
                            },
            			},
            			series: [{
                			name: '相似度',
                			type: 'line',
                			itemStyle:{
                	        	color:'rgb(39, 83, 124)'
                	        },
                			markLine:{
                				/*以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了）*/
                				symbol:"none",
                				lineStyle:{
		            				normal:{
            							color:"yellow",
            							width:2
            							//type:"solid",
            						}
            					},
                				data: [{
                					//name: '平均线',
    								// 支持 'average', 'min', 'max'
    	            				//type: 'average',
    	            				yAxis: 0.50,name:'相似度低'
                				},{
    	            				yAxis: 0.70,name:'相似度中等'
                				},{
    	            				yAxis: 0.90,name:'相似度较高'
                				}]
                			},
                			data: list
            			}],
            		    dataZoom : [{
            		        type: 'slider',
            		        show: true,
            		        start: 94,
            		        end: 100,
            		        handleSize: 8
            		    },{
            		        type: 'inside',
            		        start: 94,
            		        end: 100
            		    },{
            		        type: 'slider',
            		        show: true,
            		        yAxisIndex: 0,
            		        filterMode: 'empty',
            		        width: 12,
            		        height: '70%',
            		        handleSize: 8,
            		        showDataShadow: false,
            		        left: '93%'
            		    }]
        			};

        			// 使用刚指定的配置项和数据显示图表。
        			myChart.setOption(option);
    			</script>
			</div>
</body>
</html>